<template>
  <div class="table-flood">
    <div class="swiper-txt">
      <swiper
        :loop="true"
        :direction="'vertical'"
        :slides-per-view="slidesPerView"
        :space-between="2"
        :height="viewHight"
        :modules="modules"
        :autoplay="autoplay"
      >
        <swiper-slide v-for="(item, index) in showList" :key="index">
          <div class="item">
            <span>{{ item.time }}</span>
            <span>{{ item.val }}</span>
            <span class="yjSpan">{{ item.span }}</span>
          </div>
        </swiper-slide>
      </swiper>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive } from "vue";
import { Swiper, SwiperSlide } from "swiper/vue";
import "swiper/css/navigation";
import { Autoplay } from "swiper";
import "swiper/css";

const modules = ref([Autoplay]);
const autoplay: any = reactive({
  disableOnInteraction: false, // 鼠标滑动后继续自动播放
  delay: 2000, //2秒切换一次
});

interface TitleItem {
  title: string;
  width: number;
  key: string;
}

interface Props {
  // 数据列表
  showList: Array<any>;
  // 预览个数
  slidesPerView?: number;
  // 视口高度
  viewHight?: number;
}

const props = withDefaults(defineProps<Props>(), {
  showList: () => [],
  slidesPerView: 3,
  viewHight: 120,
});
</script>

<style lang="less" scoped>
.table-flood {
  width: 100%;
  height: 100%;
  margin-top: 1vh;
  display: flex;
  flex-direction: column;
  overflow-y: hidden;
  .swiper-txt {
    box-sizing: border-box;
    overflow: hidden;
    .item {
      display: flex;
      padding-top: 24px;
      box-sizing: border-box;
      font-size: 16px;
      line-height: 28px;
      width: 100%;
      white-space: nowrap;
      color: #fff;

      span {
        text-overflow: ellipsis;
        overflow: hidden;
        display: inline-block;
        padding-right: 5px;

        &:nth-child(2) {
          margin: 0 5vh 0 6vh;
        }
      }

      .yjSpan {
        color: yellow;
        font-size: 22px;
        font-family: "YSBTH";
        cursor: pointer;
      }
    }
  }
}
</style>
